<template>
    <el-dialog title="添加设备更新" v-model="open" width="1000px" append-to-body>
        <el-form ref="deviceFormRef" :model="form" :rules="rules" label-width="100px" label-position="top" class="scrollable-form">
            <el-button type="primary" plain icon="Plus" @click="handleDeviceAdd">
                添加主机设备固定资产
            </el-button>
            <el-table :data="deviceChooseData" style="width: 100%">
                <el-table-column
                prop="deviceName"
                label="设备名称">
                </el-table-column>
                <el-table-column
                prop="deviceType"
                label="设备类型">
                </el-table-column>
                <el-table-column
                prop="deviceSectionName"
                label="科室名称">
                </el-table-column>
                <el-table-column
                prop="deviceNo"
                label="主机设备固定资产编码">
                </el-table-column>
                <el-table-column
                prop="brand"
                label="生产厂家">
                </el-table-column>
                <el-table-column
                prop="purchaseMoney"
                label="购置金额(元)">
                </el-table-column>
                <el-table-column
                prop="useStartDate"
                label="购置/启用时间">
                </el-table-column>
                <el-table-column
                prop="scrapPartsDeviceNos"
                label="其他配件固定资产编码">
                    <template #default="scope">
                        <div style="white-space: pre-wrap;">{{ !scope.row.scrapPartsDeviceNos ? "" : String(scope.row.scrapPartsDeviceNos).split(",").join('\n') }}</div>
                        <el-button 
                            type="primary" 
                            @click="deviceOherChoose(scope.row)"
                            icon="el-icon-search"
                        >添加</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                prop="urgency"
                label="设备更新紧急程度">
                <template #default="{row, $index}">
                    <el-input 
                    v-model.number="row.urgency" 
                    type="number"
                    />
                </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-card shadow="hover">
                <div slot="header">
                    <span style="color: blue;">拟淘汰设备信息</span>
                    <div style="height: 20px;"></div>
                </div>
            <!-- <el-tag>拟淘汰设备信息</el-tag>
            <div style="height: 20px;"></div>
            <div style="height: 20px;"></div> -->
            <el-form-item label="申请科室" prop="applyDept" >
               
            <el-input
               v-model="form.applyDept"
               style="width: 300px"
            >
               </el-input>
               <!--<el-input v-model="form.applyDept" placeholder="请输入申请科室"  :suffix-icon="Search" style="width: 300px"/>-->
            </el-form-item>
            <el-form-item label="存在困难" prop="difficult" >
               <el-input v-model="form.difficult" type="textarea" placeholder="请输入内容"   :rows="3" style="width: 700px;"></el-input>
            </el-form-item>
            <el-form-item label="淘汰理由" prop="eliminationReason" >
               <el-input v-model="form.eliminationReason" type="textarea" placeholder="请输入内容"   :rows="3"  style="width: 700px"></el-input>
            </el-form-item>
            </el-card>
            <el-card shadow="hover" style="margin-top: 20px;">
                <div slot="header">
                    <span style="color: blue;">新购设备信息</span>
                    <div style="height: 20px;"></div>
                </div>
            <el-row :gutter="20">
               <el-col :span="5">
                  <el-form-item label="院区" prop="hospital">
                  <el-input v-model="form.hospital"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="5">
                  <el-form-item label="设备名称" prop="deviceName">
                  <el-input v-model="form.deviceName"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="5">
                  <el-form-item label="数量" prop="num">
                  <el-input v-model="form.num"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="5">
                  <el-form-item label="单价金额(元)" prop="unitPrice">
                  <el-input v-model="form.unitPrice"></el-input>
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row :gutter="20">
               <el-col :span="5">
                  <el-form-item label="总价金额(元)"  prop="totalPrice">
                  <el-input v-model="form.totalPrice"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="5">
                  <el-form-item label="用途" prop="purpose">
                  <el-input v-model="form.purpose"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="5">
                  <el-form-item label="环保" prop="environmentalRequirements">
                  <el-input v-model="form.environmentalRequirements"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="5">
                  <el-form-item label="安装地点是否具有安装环境" prop="installLocation">
                  <el-input v-model="form.installLocation"></el-input>
                  </el-form-item>
               </el-col>
            </el-row>
            <span>参考厂家型号</span>
            <el-table
                  :data="manufacturerData"
                  style="width: 100%">
                <el-table-column
                prop="date"
                label="生产厂家"
                width="180">
                </el-table-column>
                <el-table-column
                prop="name"
                label="型号"
                width="180">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="height: 20px;"></div>
            <el-button
                type="primary"
                plain
                icon="Plus"
                @click="handleAdd"
            >添加
            <div style="height: 20px;"></div>
            </el-button>
            <el-form-item prop="purchaseReason">
               <template #label>
               采购理由及必要性<span style="color: red">(重点阐述临床需要、设备老化需更新等不少于150字) </span>
               </template>
               <el-input v-model="form.purchaseReason" type="textarea" placeholder="请输入内容"   :rows="3"  style="width: 700px"></el-input>
            </el-form-item prop="productFunction">
            <el-form-item label="产品功能" prop="productFunction" >
               <el-input v-model="form.productFunction" type="textarea" placeholder="请输入内容"   :rows="3"  style="width: 700px"></el-input>
            </el-form-item>
            <el-form-item  prop="techniqueParam" >
               <template #label>
                  技术指标参数<span style="color: red">(150字到200字) </span>
               </template>
               <el-input v-model="form.techniqueParam" type="textarea" placeholder="请输入内容"   :rows="3"  style="width: 700px"></el-input>
            </el-form-item>
            <el-form-item label="设备预期使用频率" prop="useFrequency" >
               <el-input v-model="form.useFrequency" type="textarea" placeholder="请输入内容"   :rows="3"  style="width: 700px"></el-input>
            </el-form-item>
            <el-form-item prop="implementGoal" >
               <template #label>
                  实施目标<span style="color: red">(从满足学科发展、医工交叉等发展建设需要等方面，提出设备更新迭代的具体目标) </span>
               </template>
               <el-input v-model="form.implementGoal" type="textarea" placeholder="请输入内容"   :rows="3"  style="width: 700px"></el-input>
            </el-form-item>
            <el-form-item prop="developmentProspects" >
               <template #label>
                  申购设备的技术发展前景<span style="color: red">(从诊断能力、治疗能力、技术进步等角度进行论证) </span>
               </template>
               <el-input v-model="form.developmentProspects" type="textarea" placeholder="请输入内容"   :rows="3"  style="width: 700px"></el-input>
            </el-form-item>
            <el-form-item prop="analysisDemand" >
               <template #label>
                  差距分析及需求<span style="color: red">(对比现状和实施目标，分析差距；并根据差距测算医疗装备能力提升需求) </span>
               </template>
               <el-input v-model="form.analysisDemand" type="textarea" placeholder="请输入内容"   :rows="3"  style="width: 700px"></el-input>
            </el-form-item>
            <el-form-item prop="benefitAnalysis" >
               <template #label>
                  设备效益分析
               </template>
               <el-input v-model="form.benefitAnalysis" type="textarea" placeholder="请输入内容"   :rows="3"  style="width: 700px"></el-input>
            </el-form-item>
            <el-form-item prop="remark" >
               <template #label>
                  备注<span style="color: red">(甲乙类大型医用设备是否具备配置许可证等)  </span>
               </template>
               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"   :rows="3"  style="width: 700px"></el-input>
            </el-form-item>
            </el-card>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm">确 定</el-button>
               <el-button @click="cancel">取 消</el-button>
            </div>
         </template>
    </el-dialog>
    <device-choose ref="selectRef" @data-from-child="handleDataFromChild"></device-choose>
    <device-choose2 ref="selec2tRef" @data-from-child="handleDataFromChild2"></device-choose2>

</template>
<script setup name="addDevice">
import deviceChoose from "./deviceChoose"
import deviceChoose2 from "./deviceChoose2"
const { proxy } = getCurrentInstance()
const currentRow = ref(null)
const open = ref(false)
const deviceChooseData = ref([])
const manufacturerData = ref([])
const data = reactive({
   form: {},
   rules: {
    applyDept: [{ required: true, message: "申请科室不能为空", trigger: "blur" }],
    difficult: [{ required: true, message: "存在困难不能为空", trigger: "blur" }],
    eliminationReason: [{ required: true, message: "淘汰理由不能为空", trigger: "blur" }],
    deviceName: [{ required: true, message: "设备名称不能为空", trigger: "blur" }],
    num: [{ required: true, message: "数量不能为空", trigger: "blur" }],
    unitPrice: [{ required: true, message: "单价金额(元)不能为空", trigger: "blur" }],
    totalPrice: [{ required: true, message: "总价金额(元)不能为空", trigger: "blur" }],
    purpose: [{ required: true, message: "用途不能为空", trigger: "blur" }],
    environmentalRequirements: [{ required: true, message: "环保不能为空", trigger: "blur" }],
    hospital: [{ required: true, message: "院区不能为空", trigger: "blur" }],
    purchaseReason: [{ required: true, message: "采购理由及必要性不能为空", trigger: "blur" }],
    productFunction: [{ required: true, message: "产品功能不能为空", trigger: "blur" }],
    techniqueParam: [{ required: true, message: "技术指标参数不能为空", trigger: "blur" }],
    useFrequency: [{ required: true, message: "设备预期使用频率不能为空", trigger: "blur" }],
    implementGoal: [{ required: true, message: "实施目标不能为空", trigger: "blur" }],
    developmentProspects: [{ required: true, message: "申购设备的技术发展前景不能为空", trigger: "blur" }],
    analysisDemand: [{ required: true, message: "差距分析及需求不能为空", trigger: "blur" }],
    benefitAnalysis: [{ required: true, message: "设备效益分析不能为空", trigger: "blur" }]
   }
})
const { rules,form} = toRefs(data)

function show() {
  open.value = true
}
function handleClick(){}
function handleDataFromChild(data){
  deviceChooseData.value = data
  debugger
}
function handleDataFromChild2(data){
    debugger
    currentRow.value.scrapPartsDeviceNos = data.map(item => item).join(",")
}
function submitForm(){
    
}

function cancel(){
    open.value = false
}
function deviceOherChoose(row){
    currentRow.value = row
    debugger
    proxy.$refs["selec2tRef"].show(row)
}

function handleAdd(){}

function handleDeviceAdd(){
    proxy.$refs["selectRef"].show()
}
defineExpose({
  show,
})
</script>
<style scoped>
.scrollable-form {
  max-height: 400px;
  overflow-y: auto;
  }
</style>
